<!--
 * @docName: shoppingCart.vue
 * @Author: mwl
 * @Date: 2024/8/20
 * @LastEditors: zhongxiong
 * @LastEditTime: 10:46
-->
<template>
  <div class='content'>
    <template>
      <div style="border: 1px solid #ececec;border-radius: 4px; margin: 0 0 20px;box-sizing: border-box;padding: 8px;">
        <div style="margin-bottom: 10px;border-bottom: 1px solid #ececec;padding-bottom: 8px">
          <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
            全部订单
          </a-checkbox>
        </div>
        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange1" />
      </div>
    </template>
    <div class='table-div'>
      <a-table
        ref="table"
        bordered
        class='payment-order'
        :columns="columns"
        :dataSource="tableData"
        :pagination="ipagination"
        :loading="loading"
        :row-selection="rowSelection"
        @change="handleTableChange">
        <span slot="orderNo" slot-scope="text">
            <div class='table-li' :key="'div-'+index" v-for='(item,index) in text'>{{item}}</div>
        </span>
        <span slot="createTime" slot-scope="text">
            <div class='table-li' :key="'div-'+index" v-for='(item,index) in text'>{{item}}</div>
        </span>
        <!-- 企业所属合作模式 -->
        <span slot="entName" slot-scope="text">
            <div class='table-li' :key="'div-'+index" v-for='(item,index) in text'><j-ellipsis :value="item" :length="20" /></div>
        </span>
        <span slot="subitem" slot-scope="text">
            <div class='table-li' :key="'div-'+index" v-for='(item,index) in text'>
              {{subitemTypeData.tableTypeKeyName[item]}}
            </div>
        </span>
        <span slot="orderName" slot-scope="text">
            <div class='table-li' :key="'div-'+index" v-for='(item,index) in text'>{{item}}</div>
        </span>
        <span slot="paymentAmount" slot-scope="text">
            <div class='table-li' :key="'div-'+index" v-for='(item,index) in text'>{{item}} 元</div>
        </span>
      </a-table>
      <div style='margin-top: 10px'>
        <a-button v-if='tableData.length>0' type="primary" @click='batchSettlementFun(0)' v-prevent-re-click>合并结算</a-button>
      </div>
    </div>
  </div>
</template>

<script>
const plainOptions = [{'label':'税费订单','value':'1'},{'label':'服务费订单','value':'2'}];
const defaultCheckedList = [];
import { cloneObject, conversionElement, Storage } from '@/utils/util'
import {
  getOrderPayPaidList, getOrderPayV2Settle,
  getOrderPayV2ShoppingCart,
  getProtocolType
} from '@api/account'
import { handleExportXlsNew } from '@/common/newHandleExportXls'
export default {
  name: 'shoppingCart',
  data() {
    return {
      checkedList: defaultCheckedList,
      indeterminate: false,
      checkAll: false,
      plainOptions:plainOptions,
      taxLIst:[1010, 1011, 1012, 1014, 1015],//税费账户支付项
      subitemList:[],//已选择支付项集合
      compareTheResults:[],//支付项对比后的结果，看是否有税费支付项
      compareTheResultsNo:[],//支付项对比后的结果，看是否有税费支付项取反
      protocolTypeList:[1,2],
      protocolTypeNewList:[],//渠道总非渠道总集合
      timer: null,
      activeKey:'1',
      subitemTypeData :[],
      loading: true,
      toggleSearchStatus: false,
      queryParam: {},
      queryParams: {},
      tableData:[],
      orderNo:[],
      balanceConfig:{
        protocolType:null,
        balanceList:[]
      },
      exportObj:{
        name:'导出明细',
        url:'/qsb/order/pay/paid/list/export'
      },
      columns: [
        /*{

          title: '支付选择',
          align: 'center',
          width: 180,
          dataIndex: 'id',
          scopedSlots: {customRender: 'checkBox'},
        },*/
        {
          title: '创建时间',
          align: 'center',
          width: 180,
          dataIndex: 'createTime',
          scopedSlots: {customRender: 'createTime'},
        },
        {
          title: '订单号',
          align: 'center',
          width: 120,
          dataIndex: 'orderNo',
          scopedSlots: {customRender: 'orderNo'},
        },
        {
          title: '交易关联企业',
          dataIndex: 'entName',
          align: 'center',
          width: 240,
          scopedSlots: {customRender: 'entName'},
        },
        {
          title: '交易类型',
          dataIndex: 'subitem',
          align: 'center',
          width: 130,
          scopedSlots: {customRender: 'subitem'},
        },
        {
          title: '订单内容',
          dataIndex: 'orderName',
          align: 'center',
          width: 130,
          scopedSlots: {customRender: 'orderName'},
        },
        {
          title: '交易金额',
          align: 'center',
          width: 100,
          dataIndex: 'paymentAmount',
          scopedSlots: {customRender: 'paymentAmount'},
        }
      ],
      selectedRowKeys: [],  //批量支付数据id
      selectedRows:[],//批量支付数据
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return " 共" + total + "条"
        },
        showSizeChanger: true,
      },
      entCollections:[],//支付企业id集合
      //提示集合
      confirmList:{
        '0001':{//单个企业渠道总提醒
          title: '您选择的支付订单中，同时包含税费订单及服务费订单，合并支付仅支持使用渠道通用账户支付！',
          content: '若您需要使用其他方式支付，请取消勾选服务费订单，谢谢!',
          okText: '前往支付',
          okType: 'primary',
          okButtonProps: false,
          cancelText: '重新选择',
        },
        '0002':{//单个企业非渠道总提醒
          title: '您选择的支付订单中，同时包含税费订单及服务费订单，合并支付仅支持使用企业通用账户支付！',
          content: '若您需要使用其他方式支付，请取消勾选服务费订单，谢谢!',
          okText: '前往支付',
          okType: 'primary',
          okButtonProps: false,
          cancelText: '重新选择',
        },
        '0003':{//多个企业渠道总提醒
          title: '您选择的支付订单中，同时包含税费订单及服务费订单，合并支付仅支持使用渠道通用账户支付！',
          content: '若您需要使用其他方式支付，请取消勾选服务费订单，谢谢!',
          okText: '前往支付',
          okType: 'primary',
          okButtonProps: false,
          cancelText: '重新选择',
        },
        '0004':{//多个企业非渠道总提醒
          title: '您选择的支付订单中，存在多个企业的服务费订单，无法进行合并支付！',
          content: '',
          okText: '前往支付',
          okType: 'primary',
          okButtonProps: true,
          cancelText: '重新选择',
        },
        '0005':{//多个企业渠道总&非渠道总提醒
          title: '您选择的支付订单中，同时包含渠道总及非渠道总两种模式的企业，无法进行合并支付！',
          content: '',
          okText: '前往支付',
          okType: 'primary',
          okButtonProps: true,
          cancelText: '重新选择',
        },
        '0006':{//多个非渠道总税费订单提醒
          title: '您选择的订单中含多个支付主体，需要合井支付，仅支持使用渠道税费账户支付或扫码支付！',
          content: '',
          okText: '前往支付',
          okType: 'primary',
          okButtonProps: false,
          cancelText: '重新选择',
        }

      },
    }
  },
  created() {
    const str = localStorage.getItem('pro__Login_Userinfo')
    const userInfo = str ? JSON.parse(str) : {}
    this.getTableData();
    this.subitemTypeData = Storage.get('SubitemType');
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`下标: ${selectedRowKeys}`, '数据: ', selectedRows);
          this.selectedRowKeys = selectedRowKeys;
          this.selectedRows = selectedRows;
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.orderStatus[0] === 9,
          },
        }),
      };
    },
  },
  methods:{

    //首次获取表格数据
    getTableData(){
      this.loading = true;
      let params = {};
      params.data =  cloneObject(this.queryParams);
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getOrderPayV2ShoppingCart(params).then(res => {
        if (res.success && res.result) {
          // // 赋值表格数据
          this.tableData = res.result.records || [];
          // 赋值总条数
          this.ipagination.total = res.result.total || 0;
          for(var i = 0; i < this.tableData.length;i++){
            let orderNo=[];//订单号
            let createTime=[];//创建时间
            let entName=[];//关联企业
            let entIds=[];//关联企业
            let subitem=[];//交易类型
            let orderStatus=[];//支付状态
            let paymentAmount=[];//交易金额
            let orderName=[];//关联内容

            for(var j = 0; j < this.tableData[i].shoppingCartVos.length;j++){
              orderNo.push(this.tableData[i].shoppingCartVos[j].orderNo)
              this.tableData[i].orderNo = orderNo;

              createTime.push(this.tableData[i].shoppingCartVos[j].createTime)
              this.tableData[i].createTime = createTime;
              if(this.tableData[i].shoppingCartVos[j].entName){
                entName.push(this.tableData[i].shoppingCartVos[j].entName)
              }else{
                entName.push('名称待定：（ID：'+this.tableData[i].shoppingCartVos[j].entId+')')
              }

              this.tableData[i].entName = entName;
              entIds.push(this.tableData[i].shoppingCartVos[j].entId)
              this.tableData[i].entIds = entIds;

              subitem.push(this.tableData[i].shoppingCartVos[j].subitem)
              this.tableData[i].subitem = subitem;

              orderStatus.push(this.tableData[i].shoppingCartVos[j].orderStatus)
              this.tableData[i].orderStatus = orderStatus;

              paymentAmount.push(conversionElement(this.tableData[i].shoppingCartVos[j].paymentAmount))
              this.tableData[i].paymentAmount = paymentAmount;

              orderName.push(this.tableData[i].shoppingCartVos[j].orderName)
              this.tableData[i].orderName = orderName;

              // action.push(this.tableData[i].shoppingCartVos[j].id)
              // this.tableData[i].action = action;
            }

          }
          console.log(this.tableData)
          this.loading = false;
        }else{
          this.tableData = [];
          this.loading = false;
        }

      })
    },
    //时间选择
    onChange(date, dateString) {
      this.queryParam.paymentTimeStart =dateString[0];
      this.queryParam.paymentTimeEnd =dateString[1];
    },
    //批量结算
    batchSettlementFun(type){

      if(this.entCollections.length>0){
        this.entCollections = [];
      }

      for(let i = 0; i < this.selectedRows.length; i++){
        this.entCollections.push(this.selectedRows[i].ids);
      }
      console.log(this.entCollections)
      let params = {
        confirm:type,
        subitemIds:this.entCollections
      };
      getOrderPayV2Settle(params).then(res => {
        if (res.success) {
          let result = res.result;
          if(result){
            if(result.status == 0){
              this.paymentDataFun(result.orderPayInfoId)
            }else{
              this.tipsConfirm(result.popup)
            }

          }
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    paymentDataFun(result){
      if (this.selectedRowKeys.length > 0){
        let key = 'paymentOrder'
        Storage.set(key,{payInfo:result});
        console.log(Storage.get('paymentOrder'))
        this.$router.push({
          path: '/myAccount/paymentPage',
          query:{
            pi:key
          }
        });
      }else {
        this.$message.warning('合并支付选中数据不能为空');
        return false;
      }
    },

    //查询
    searchQuerys() {
      this.ipagination.current=1;
      this.getTableData();
    },
    //重置
    searchResets() {
      this.ipagination.current=1;
      this.queryParam = {};
      this.getTableData();
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      this.ipagination = pagination;
      this.getTableData();
    },
    onChange1(checkedList) {
      this.ipagination.current=1;
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
      this.checkAll = checkedList.length === plainOptions.length;
      this.queryParams.type = checkedList;
      if(checkedList.length<=0){
        this.queryParams.type = null;
      }else{
        this.queryParams.type = checkedList;
      }
      this.getTableData();
    },
    //提醒弹窗
    tipsConfirm(num) {
      const that = this;
      this.$confirm({
        title: this.confirmList[num].title,
        content: this.confirmList[num].content,
        okText: this.confirmList[num].okText,
        okType: this.confirmList[num].okType,
        okButtonProps: {
          props: { disabled: this.confirmList[num].okButtonProps },
        },
        cancelText: this.confirmList[num].cancelText,
        onOk() {
          that.batchSettlementFun(1);
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    onCheckAllChange(e) {
      this.ipagination.current=1;
      //如果选中全选的话就遍历拿出当前相对项的数组的全部值
      let newArr = []
      if(e.target.checked){
        newArr = this.plainOptions.map(item=>{
          return item.value
        })
      }
      this.checkedList = e.target.checked ? newArr:[]
      this.indeterminate = false
      this.checkAll = e.target.checked;
      if(this.checkedList.length<=0){
        this.queryParams.type = null;
      }else{
        this.queryParams.type = this.checkedList;
      }
      this.getTableData()
      console.log(111,this.queryParams)
    },
  }
}
</script>

<style scoped lang="less">
/deep/ .payment-order .ant-table-row:nth-child(odd) {
  background: #fff;
}
/deep/ .payment-order .ant-table-row:nth-child(even) {
  background: #f6f7ff;
}
.content{
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  .title{
    font-size: 20px;
    font-weight: 600;
    color: #222;
  }
  .table-div{
    padding: 20px 0;
  }
  .table-li{
    border-bottom: 1px solid #e8e8e8;
    padding: 16px;
  }
  .table-div /deep/ .ant-table-selection-column{
    padding: 0;
  }
  .table-div /deep/ .ant-table-header-column{
    padding: 16px;
  }
  .table-div /deep/ .ant-table-row-cell-break-word{
    padding: 0;
  }
}
</style>


